<template>
	<view>
		<view class="top-banner">
			<image  class="img-top" src="http://shop.happyjia.top/public/wechat_imgs/kapai-test/top-banner.png"></image>
		</view>



		<view class="list">
			<view class="imgs">
				<image src="http://shop.happyjia.top/public/wechat_imgs/kapai-test/first.png" class="img"></image>
			</view>
			<view class="active">
				<view class="active-tit">
					<text class="tit">活动A  2024.6.20-7.20</text>
				
				</view>
			
			</view>
		</view>
		
		<view class="list">
			<view class="imgs">
				<image src="http://shop.happyjia.top/public/wechat_imgs/kapai-test/second.png" class="img"></image>
			</view>
			<view class="active">
				<view class="active-tit">
					<text class="tit">活动A  2024.6.20-7.20</text>
				
				</view>
			
			</view>
		</view>
		
		

	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	page{
		height: 100vh;
		background: rgba(233, 234, 242, 1);
		
	}
	
	.top-banner{
		width: 100%;
		height: 446rpx;	
		
	}
	.img-top{
		width: 100%;
		height: 446rpx;
	}
	
	.list {
		display: flex;
		flex-direction: column;
		width: 726rpx;
		height: 400rpx;
		background-color: #fff;
		border-radius: 21rpx;
		margin: 10rpx auto;
		margin-bottom: 30rpx;
	}
	.imgs{
		margin: 20rpx auto;
		width: 688rpx;
		height: 300rpx;
		border-radius: 10rpx;
	}

	.img {
		width:100%;
		height: 300rpx;
		

	}

	.active-tit {
		display: flex;
		flex-direction: column;
		width: 450rpx;
		height: 128rpx;

	}

	.tit {
		margin-left: 20rpx;
		font-size: 29rpx;
		font-weight: bold;
		color: #000;


	}

	.time {
		margin-left: 52rpx;
		font-size: 24rpx;
		color: #9B9B9D;
	}

	.active-btn {
		width: 240rpx;
		height: 128rpx;


	}

	.btn {
		margin: 34rpx auto;
		border-radius: 40rpx;
		background-color: #7863FF;
		color: #fff;
		width: 180rpx;
		height: 60rpx;
		font-size: 28rpx;
		font-weight: 500;
		text-align: center;

		line-height: 60rpx;
	}

	.active {
		display: flex;

	}
</style>